<template>
  <div class="home">
    <van-nav-bar title="租车平台" />

    <!-- 日期选择区域 -->
    <van-row class="date-picker" @click="showCalendar = true">
      <van-col span="8">
        <div class="date-info">
          <div>{{ formatDate(rentalStore.pickupDate) }}</div>
          <div>{{ getWeekDay(rentalStore.pickupDate) }}</div>
        </div>
      </van-col>
      <van-col span="8" class="center">
        <div class="days">共{{ getDaysDiff() }}天</div>
      </van-col>
      <van-col span="8">
        <div class="date-info">
          <div>{{ formatDate(rentalStore.returnDate) }}</div>
          <div>{{ getWeekDay(rentalStore.returnDate) }}</div>
        </div>
      </van-col>
    </van-row>

    <!-- 城市选择 -->
    <van-cell
      title="取车城市"
      :value="rentalStore.pickupCity || '请选择城市'"
      is-link
      @click="showCityPicker = true"
    />

    <van-row>
      <van-col span="24">
        <van-radio-group v-model="rentalStore.option">
          <van-radio name="异地还车">异地还车 - 全国任意网点可还</van-radio>
          <van-radio name="上门送取车">上门送取车</van-radio>
        </van-radio-group>
      </van-col>
    </van-row>

    <van-button type="warning" block @click="goToCarSelect"
      >立即选车</van-button
    >
    <div class="footer-note">押金可免·单单整备</div>
    <div class="footer-note">押金可免·单单整备·不限里程欢迎使用</div>
    <!-- 日历选择弹出层 -->
    <van-calendar
      v-model:show="showCalendar"
      type="range"
      :min-date="minDate"
      :max-date="maxDate"
      :show-confirm="true"
      confirm-text="确认"
      @confirm="onConfirmDate"
      :style="{ height: '618px' }"
      color="#ff9900"
      :formatter="formatter"
      :allow-same-day="false"
      first-day-of-week="1"
    />

    <!-- 城市选择弹出层 -->
    <van-popup v-model:show="showCityPicker" round position="bottom">
      <van-picker
        title="选择城市"
        show-toolbar
        :columns="columns"
        @cancel="onCancel"
        @confirm="onConfirm"
        @change="onChange"
      />
    </van-popup>

    <TabBar />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useRentalStore } from "@/stores/rental";
import { showToast } from "vant";
import dayjs from "dayjs";
import TabBar from "@/components/TabBar.vue";

const router = useRouter();
const rentalStore = useRentalStore();

const showCalendar = ref(false);
const showCityPicker = ref(false);

// 日期选择器配置
const minDate = new Date();
const maxDate = dayjs().add(90, "day").toDate();

// 获取星期几
const getWeekDay = (date) => {
  const weekDays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
  return weekDays[dayjs(date).day()];
};

// 计算天数差
const getDaysDiff = () => {
  return dayjs(rentalStore.returnDate).diff(
    dayjs(rentalStore.pickupDate),
    "day"
  );
};

// 格式化日期显示
const formatDate = (date) => {
  return dayjs(date).format("MM月DD日");
};

// 日期格式化函数
const formatter = (day) => {
  const month = day.date.getMonth() + 1;
  const date = day.date.getDate();

  // 添加自定义提示信息
  if (day.type === "start") {
    day.bottomInfo = "取车";
  } else if (day.type === "end") {
    day.bottomInfo = "还车";
  }

  return day;
};

// 日期确认
const onConfirmDate = ([start, end]) => {
  rentalStore.setDates(start, end);
  showCalendar.value = false;
};

// 城市选择器数据
const columns = [
  { text: "赣州", value: "ganzhou" },
  { text: "南昌", value: "nanchang" },
  { text: "深圳", value: "shenzhen" },
  { text: "广州", value: "guangzhou" },
  { text: "北京", value: "beijing" },
  { text: "上海", value: "shanghai" },
];

// 城市选择确认
const onConfirm = ({ selectedOptions }) => {
  rentalStore.setCities(selectedOptions[0].text);
  showCityPicker.value = false;
};

// 城市选择变化
const onChange = ({ selectedOptions }) => {
  console.log(selectedOptions[0].text);
};

// 取消选择
const onCancel = () => {
  showCityPicker.value = false;
};

// 去选车
const goToCarSelect = () => {
  if (!rentalStore.pickupCity) {
    showToast("请选择取车城市");
    return;
  }

  router.push({
    path: "/car-select",
    query: {
      pickupDate: rentalStore.pickupDate,
      returnDate: rentalStore.returnDate,
      city: rentalStore.pickupCity,
      returnCity: rentalStore.returnCity,
    },
  });
};
</script>

<style scoped lang="scss">
.home {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 50px;
}

.date-picker {
  background: #fff;
  padding: 16px;
  margin-bottom: 12px;

  .date-info {
    text-align: center;

    div:first-child {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }

    div:last-child {
      font-size: 14px;
      color: #666;
      margin-top: 4px;
    }
  }

  .center {
    display: flex;
    align-items: center;
    justify-content: center;

    .days {
      color: #ff9900;
      font-size: 14px;
    }
  }
}

.footer-note {
  text-align: center;
  color: #999;
  margin-top: 12px;
}
</style> 